<template>
  <div class="legend">
    <div class="legend-item" v-for="(item, index) in status" :key="index">
      <img :src="require(`@/assets/img/status/state${index + 1}.png`)" width="15" height="18" />
      <span style="margin: 0 8px">{{ item.label }}</span>
      <span>{{ item.data }}</span>
    </div>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'LegendSingle',
  props: {
    status: {
      type: Array,
      default: [
        { label: '运行', data: 0 },
        { label: '停止', data: 0 },
        { label: '故障', data: 0 },
        { label: '满纱满桶', data: 0 },
        { label: '通讯失败/停电', data: 0 },
        { label: '计划停台', data: 0 }
      ]
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.legend {
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: black;
  .legend-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    & + .legend-item {
      margin-left: 20px;
    }
  }
}
</style>
